我們今天要建立一個簡單的欄位版型搭配邊框。會有一張圖片、圖片介紹跟邊框。
<style>
.wrap{
width: 255px;
height: 255px;
margin: auto;
margin-top: 30px;
}
</style>
<body>
<div class="test">
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/id/237/250/250" alt="">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, voluptatem reiciendis provident aliquid perferendis accusantium quis in explicabo placeat at dignissimos quasi ex neque voluptas ab nostrum molestiae commodi nemo!</p>
</div>
</div>
</div>
</body>
目前出來的結果是這樣，而我們要幫他加上邊框，要注意的是，我有link一個reset.css的樣式，我們後續會介紹這個東西是做甚麼用的!還有要設定寬高時要注意還要加上border的寬度!
.item{
border: solid black;
}
邊框:單位大小 線的樣式(單線、虛線、雙線) 顏色
border: 5px solid black;
是不是有點擠，我們在段落p加上padding!這樣看起來就會舒服多了。
p{
padding: 5px;
}
邊框-圓角:單位大小;
border-radius: 12px;
.item{
border: 4px solid black;
border-radius: 12px;
overflow: hidden;
}
img{
width: 100%;
}
再加上這些屬性以後就會有圓角的邊框，看起來滑潤多了!圖片設定100%是為了要滿版!而設定overflow:hidden是為了不要圖片切出邊框。之後會說明這個屬性。
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
加上這行後，試試看讓你的圖片有浮起來的效果!
box-shadow:inset offset-x offset-y blur-radius spread-radius 陰影顏色;
讓我來為你解釋這些意思!
快試試看你做出來是不是跟我一樣的效果呢!
iThome鐵人賽
看影片追技術